import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  VideoCameraOutlined,
  AliyunOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Space, Table, Tag, Button, Icon, Col, Row } from "antd";
import React, { useState, useMemo, useCallback } from "react";
import { useDispatch } from "react-redux";

import { useNavigate, useLocation } from "react-router-dom";

import { Navigate, Route, Routes } from "react-router";
import "./login.scss";
import Login from "./Login";
import Home from "./manage/Home";
import User from "./manage/User";
import UserList from "./manage/user/List";
import UserAdd from "./manage/user/Add";
import UserDetail from "./manage/user/Detail";

import Goods from "./manage/Goods";
import GoodsList from "./manage/goods/List";
import GoodsAdd from "./manage/goods/Add";
import GoodsDetail from "./manage/user/Detail";

const { Header, Sider, Content } = Layout;

// const data = [
//   {
//     key: "1",
//     name: "John Brown",
//     age: 32,
//     address: "New York No. 1 Lake Park",
//     tags: ["nice", "developer"],
//   },
//   {
//     key: "2",
//     name: "Jim Green",
//     age: 42,
//     address: "London No. 1 Lake Park",
//     tags: ["loser"],
//   },
//   {
//     key: "3",
//     name: "Joe Black",
//     age: 32,
//     address: "Sidney No. 1 Lake Park",
//     tags: ["cool", "teacher"],
//   },
// ];
// data 数据通过传进来的参数进行写入
// columns 设置表格如何展示出来
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address",
  },
];

function Manage() {
  const baseUrl = "/manage";
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();

  // const dispatch = useDispatch();
  // const [curKey, setCurKey] = useState("1");
  // const menuClick = (e) => {
  //   setCurKey(e.key);
  // };
  //baseUrl 拼接路径
  const selectedKey = location.pathname.replace(baseUrl, "") || "/home";
  const openKey = location.pathname.match(/\/(user|goods)/)?.[0];
  // openKey = openkey ? openKey[0] : ''
  // const logout = useCallback(function () {
  //     dispatch({ type: 'logout' })
  // }, [])

  const menu = useMemo(() => [
    {
      key: "/home",
      icon: <UserOutlined />,
      label: "首页",
    },
    {
      key: "/goods",
      icon: <VideoCameraOutlined />,
      label: "商品管理",
      children: [
        {
          key: "/goods/add",
          label: "add",
        },
        {
          key: "/goods/list",
          label: "list",
        },
      ],
    },
    {
      key: "/user",
      icon: <UploadOutlined />,
      label: "用户管理",
      children: [
        {
          key: "/user/add",
          label: "add",
        },
        {
          key: "/user/list",
          label: "list",
        },
      ],
    },
  ]);

  const changeMenu = useCallback(function ({ key }) {
    // console.log(item, key, keyPath, domEvent);
    // const path = keyPath.reverse().join('')
    // console.log('path',path)
    // navigate(key)
    // baseUrl 对路由 /manage 进行路径加动态路径
    navigate(baseUrl+key);
  }, []);
  const logout = useCallback(function () {
    dispatch({ type: "logout" });
  }, []);

  return (
    <Layout style={{ height: "100%" }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <AliyunOutlined
          style={{
            color: "#ccc",
            fontSize: "50px",
            display: "inline-block",
            textAlign: "center",
          }}
        />
        <span
          style={{
            color: "#ccc",
            fontSize: "25px",
            display: "inline-block",
            textAlign: "center",
            overflow: "hidden",
          }}
          theme="dark"
          mode="inline"
        >
          后台管理
        </span>
        <Menu
          theme="dark"
          mode="inline"
          // useLocation 方法刷新拿到动态的地址
          defaultSelectedKeys={[selectedKey]} // SelectedKeys 接收到里面的数据
          // defaultCollapsed 默认收起 通过设置进行设置 达到刷新还是展开的效果
          defaultOpenKeys={[openKey]}
          // 后台管理结构数据
          items={menu}
          onClick={changeMenu}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => setCollapsed(!collapsed),
            }
          )} 
          <Button
            type="link"
            size="small"
            style={{ float: "right", marginTop: "10px", marginRight: "20px" }}
            // items={menu}
            onClick={logout}
          >
            退出
          </Button>
          </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
          }}
        >
          {/* 在没有路由的情况下 事件中没有子节点的话 会报这个错 The node to be removed is not a child of this node.*/}
          {/* 解决方案：一：保证有对应的子节点
                           二：通过路由跳转 */}
          {/* columns 数组数据    */}
          <Routes>
            <Route index element={<Navigate to="home" />} />
            <Route path="home" element={<Home />} />

            <Route path="user/*" element={<User />}>
              <Route path="add" element={<UserAdd />} />
              <Route path="list" element={<UserList />} />
              <Route path=":id" element={<UserDetail />} />
            </Route>
            <Route path="goods/*" element={<Goods />}>
              <Route path="add" element={<GoodsAdd />} />
              <Route path="list" element={<GoodsList />} />
              <Route path=":id" element={<GoodsDetail />} />
            </Route>
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
}

export default Manage;
